<template>
  <div class="bg">
    <el-form  class="form-class" :model="user_register_form" :rules="rules" ref="user_register_form_ref">
      <h2>用户注册</h2><br/>
      <el-form-item prop="username">
        <el-input type="text" placeholder="用户名" v-model="user_register_form.username"></el-input>
      </el-form-item>
      <el-form-item prop="email">
        <el-input type="email" placeholder="邮箱" v-model="user_register_form.email"></el-input>
      </el-form-item>
      <el-form-item prop="password">
        <el-input type="password" placeholder="密码" v-model="user_register_form.password"></el-input>
      </el-form-item><br/>
      <el-form-item>
        <el-button  type="primary" @click="registerBtn">注册</el-button> <el-button  type="primary" @click="backLogin">返回</el-button>
      </el-form-item>
    </el-form>
  </div>
</template>

<script>
  import router from '../router';

  export default {
    data(){
      return{
        user_register_form:{
          username:'',
          email:'',
          password:''
        },
        rules:{
          username:[
            {required:true,message:'请输入用户名',trigger:'blur'}
          ],
          password:[
            {required:true,message:'请输入密码',trigger:'blur'},
            {min:4,max:8,message:'请输入4-8个字符',trigger:'blur'}
          ],
          email:[
            {required:true,message:'请输入邮箱',trigger:'blur'}
          ]
        }
      }
    },
    methods:{
      registerBtn(){
        this.$refs['user_register_form_ref'].validate( (valid) => {
          if(valid){
            this.$message({
              message:'进行注册',
              duration:1000,
              type:'success'
            });
            this.axios.post('/user/register',
                    {"username":this.user_register_form.username,"password":this.user_register_form.password,"email":this.user_register_form.email})
            .then(function (response) {
              if(response.status == 0){
                router.push('/login');
              }else{
                alert('注册失败： '+response.data.message);
              }
            }).catch(function (response) {
                alert('传输数据失败');
            });
          }else{
            this.$message({
              message:'请输入正确数据',
              duration:1000,
              type:'error'
            })
          }
        })
      },
      backLogin(){
        //引入element，可以使用的弹出对话框形式
        this.$message({
          message:'返回登录',
          duration:1000,
          type:'success'
        })
        //路由，跳转到登录页面
        this.$router.push('/login');
      }
    }
  }
</script>

<style>
  .form-class {
    background-color: #ffffff;
    width: 300px;
    height: 350px;
    margin: 100px auto;
    padding: 20px;
    border-radius: 10px;
    border: 1px solid #cac6c6;
    box-shadow: 0 0 20px #cac6c6;
  }
</style>
